<template>
  <view>
    <view v-if="!isScan">
      <u-form :model="form" ref="uForm" class="form">
        <u-form-item label-width="140"  label="*邀请码" prop="investCode">
          <u-input placeholder="只可输入长度为六的字符串" v-model="form.investCode" />
        </u-form-item>
      </u-form>
      <view class="button">
        <u-button size="medium" shape="circle" type="primary" @click="query " :ripple="true" ripple-bg-color="#a0cfff">查找</u-button>
      </view>
      <!--#ifndef H5-->
      <view class="u-tips-color u-text-center u-margin-15">需扫码加入{{ name }}请前往我的页面点击扫一扫</view>
      <!--#endif-->
    </view>
    <view class="course" v-if="isShow">
      <view class="avatar">
        <u-avatar :src="obj.avatar" size="140"></u-avatar>
      </view>
      <view class="name">
        {{ name }}名：{{ obj.name }}
      </view>
      <view class="username">
        {{ name }}负责人：{{ obj.username }}
      </view>
      <view class="join-count">
        最大可加入人数：{{ obj.maxJoinCount }}
      </view>
      <view class="join-count">
        已加入人数：{{obj.joinCount }}
      </view>
      <view class="button">
        <u-button size="medium" shape="circle" type="primary" @click="submit()" :ripple="true" ripple-bg-color="#a0cfff">加入</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import {getUserInfo, setUserInfo} from "../../common/auth";

export default {
  name:"courseOrClazzObj",
  data() {
    return {
      form: {
        investCode: ''
      },
      obj:{},
      isShow: false,
      rules: {
        investCode: [
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              return value.length === 6;
            },
            type: "integer",
            required: true,
            message: '只可输入长度为六的字符串',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  props: {
    name: {
      type: String,
      default: '课程'
    },
    isCourse: {
      type: Boolean,
      default: true
    },
    isScan: {
      type: Boolean,
      default: false
    },
    course: {
      type: Object
    }
  },
  created(){
    if(this.isScan){
      this.obj = this.course;
      this.isShow = true;
    }
  },
  mounted() {
    if (!this.isScan){
      this.$refs.uForm.setRules(this.rules);
    }
  },
  methods:{
    query() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          if (this.isCourse) {
            this.$u.api.getCourseByInvestCode(this.form.investCode).then(res => {
              this.obj = res.data;
              this.isShow = true;
            })
          } else {
            this.$u.api.getClazzByInvestCode(this.form.investCode).then(res => {
              this.obj = res.data;
              this.isShow = true;
            })
          }
        }
      })
    },
    submit() {
      if (this.obj.joinCount + 1 < this.obj.maxJoinCount) {
        if (!this.$u.test.isEmpty(this.$store.state.user.id)) {
          if (this.isCourse){
            let data = {
              courseId: this.obj.id,
              userId: this.$store.getters.id
            }
            this.$u.api.joinCourse(data).then(res => {
              this.$u.toast('加入成功！');
              uni.$emit("initial1");
              uni.switchTab({
                url:'/pages/index/index',
                fail: (err) => {
                  this.$u.toast('跳转出错');
                }
              })
            })
          }else {
            this.$u.api.joinClazz(this.$store.state.user.id,this.obj.id).then(res => {
              let user = getUserInfo();
              user.clazzId = this.obj.id;
              setUserInfo(user)
              this.$store.commit("SET_CLAZZ_ID",this.obj.id);
              this.$u.toast('加入成功！');
              uni.switchTab({
                url:'/pages/mine/mine',
                fail: (err) => {
                  this.$u.toast('跳转出错');
                }
              })
            })
          }
        }
      } else {
        this.$u.toast('该课程人数已达上限！');
      }
    }
  }
}
</script>

<style lang="scss">
.button{
  text-align: center;
  margin-top: 20rpx;
}
.form{
  margin: 0 20rpx;
}
.course {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 100rpx;
  font-weight: bolder;
  font-size: 30rpx;
  padding: 20rpx;

  .avatar {
    text-align: center;
    margin: 0 auto;
  }

  .name {
    margin-top: 25rpx;
    color: #19be6b;

  }

  .username{
    margin-top: 20rpx;
    color: #2B85E4;
  }
  .join-count {
    margin-top: 15rpx;
    color: #ab6360;
    margin-bottom: 20rpx;
  }

}
</style>
